<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>命名路由</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  为了方便的表示路由的路径，可以给路由规则起一个别名。即“命名路由”
  name: "me"

  动态的绑定to的对象,并要指定跳转的参数
  <router-link :to='{name: "me" , params:{id:3} }'>
 -->

<body>
  <div id="app">
    <router-link to="/me/1">第一个跳我这吧</router-link>
    <router-link to="/me/2">第二个跳我这吧</router-link>
    <router-link :to='{name: "me" , params:{id:3} }'>第三个跳我这吧</router-link>
    <router-link to="/you">你过来</router-link>
    <router-link to="/he">它要来了</router-link>

    <router-view />
  </div>
</body>
<script>
  "use strict";
  const me = {
    props: ["id"],
    template: `<h1 style="color: hotpink;">这就是我呀,来到了{{id}}</h1>`
  };
  const you = {
    template: `<h1 style="color: red;">你看看你自己的吧</h1>`
  };
  const he = {
    template: `<h2 style="color: gload">它不懂得</h2>`
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/me"
    }, {
      // 命名规则
      name: "me",
      path: "/me/:id",
      component: me,
      props: route => {
        return {
          id: route.params.id
        }
      }
    }, {
      path: "/you",
      component: you
    }, {
      path: "/he",
      component: he
    }]
  });
  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>